<template>
<a-row>
  <a-col :span="1" style="text-align: center">
    <img src="../assets/logo.png" style="height: 2.5vw;width: 2.5vw" alt="Eslm">
  </a-col>
  <a-col :span="2" style="text-align: center">
    <div class=logo>
      饿死了么
    </div>
  </a-col>
  <a-col :span="20"/>
  <a-col :span="1">
    <a-popover v-if="userIconTip!='登录'" :title="'已作为'+userIconTip+'登录'" trigger="click" placement="bottomRight">
      <a-avatar shape="circle" :style="{backgroundColor: avatarColor, verticalAlign: 'middle',cursor:'pointer'}">
        {{userIconTip}}
      </a-avatar>
      <div slot="content">
        <a-button @click="logout" :disabled="$route.path=='/submit'">注销</a-button>
        <p v-if="$route.path=='/submit'">禁止在提交订单时注销登录</p>
      </div>
    </a-popover>

    <router-link v-else to="/login">
      <a-avatar shape="square" :style="{backgroundColor: avatarColor, verticalAlign: 'middle'}">
        {{userIconTip}}
      </a-avatar>
    </router-link>
  </a-col>
</a-row>
</template>

<script>
export default {
name: "Top",
  data(){
    return{
      userIconTip:'登录',
    }
  },
  computed:{
    avatarColor:function (){
      if (this.userIconTip=='登录') return '#bdbdbd'
      else return '#1e88e5'
    },
    userNameChange(){
      return this.$store.state.userName
    }
  },
  watch:{
    userNameChange:function () {
      this.userIconTip=this.$store.getters.getUserName
      if(this.$store.getters.getUserName=='') this.userIconTip='登录'
    }
  },
  methods:{
    logout:function (){
      this.$store.commit('clearLogging')
    }
  }
}
</script>

<style>
.logo{
  color: #dddddd;
  font-size: 1.5vw;
  font-family: "Microsoft YaHei UI";
}
</style>